<template>
  <div class="container_sort">
    <ul class="type2">
      <li
        v-for="(item ,index) in type2"
        :key="index"
        class="item"
        :class="current == index?'active':'active1'"
        @click="checkEvent(item ,index)"
      >
        {{item.name}}
        <img :src="item.src" alt class="img" />
      </li>
    </ul>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data() {
    return {
      ImgBaseUrl: common.image_response, //img 域名
      type2: [
        {
          name: "",
          id: 1,
          src: "https://img.ameimeika.com//h5_images/lifebeauty/up.png",
          "mark": true
        },
        {
          name: "全城",
          id: 2,
          src: "https://img.ameimeika.com//h5_images/lifebeauty/up.png",
          "mark": true
        },
        {
          name: "智能排序",
          id: 3,
          src: "https://img.ameimeika.com/h5_images/lifebeauty/up.png",
          "mark": true
        }
      ],
      typeId: -1,
      url: "https://img.ameimeika.com/h5_images/lifebeauty/down.png",
      src: "https://img.ameimeika.com/h5_images/lifebeauty/up.png",
      current: -1,
      sortname: ""
    };
  },
  methods: {
    checkEvent: function(e, index) {
      this.current = index;
      // console.log(e)
      this.type2.forEach(el => {
        if (el.id == e.id) {
          el.src = this.url;
        } else {
          el.src = this.src;
        }
      });
      this.$emit("getVal", e);
    }
  },
  watch: {
    sortText1(newval, val) {
      this.type2[2].name = newval;
    },
    num1(newval, val) {
      this.type2[1].name = newval;
    },
    beautytype(newval, val) {
      this.type2[0].name = newval;
      // console.log(val)
    }
  },
  computed: {},
  onLoad(options) { 
    if (wx.getStorageSync("typename_life")&& wx.getStorageSync("typename_life")!=='') {
       this.type2[0].name = this.beautytype? this.beautytype: wx.getStorageSync("typename_life");    
    } else {
      this.type2[0].name = "美容";
      //  console.log(wx.getStorageSync("typename") +'----82')
     
    }
    // this.type2[0].name = this.beautytype? this.beautytype: (wx.getStorageSync("typename")?wx.getStorageSync("typename"):'美容')
    console.log(wx.getStorageSync("typename_life")  +'----87');
  },
  props: {
    sortText1: "",
    num1: "",
    beautytype: ""
  }
};
</script>


<style lang="less" scoped>
.container_sort {
  background: #fff;
  height: auto;
  .type2 {
    width: 100%;
    height: 36px;
    padding: 8px 0;
    box-sizing: border-box;
    font-size: 14px;
    color: #3f454b;
    display: flex;
    text-align: center;
    .item {
      width: 33.3%;
      height: auto;
      &.active {
        color: #ec588b;
      }
      &.active1 {
        color: #3f454b;
      }

      &.item:nth-of-type(2) {
        border-left: 1px solid #e6e6e6;
        border-right: 1px solid #e6e6e6;
      }
    }
    .img {
      width: 8px;
      height: 6px;
    }
  }
}
</style>


